<template>
  <el-card>
    <el-form :model="form" label-width="120px" style="max-width: 500px">
      <el-form-item label="离职客服">
        <el-select v-model="form.departingStaff" placeholder="请选择离职客服" filterable>
          <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name" :value="staff.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接手客服">
        <el-select v-model="form.inheritingStaff" placeholder="请选择接手客服" filterable>
          <el-option v-for="staff in availableStaffList" :key="staff.id" :label="staff.name" :value="staff.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleHandover" :disabled="!form.departingStaff || !form.inheritingStaff">
          确认交接
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessageBox, ElNotification } from 'element-plus';

const form = ref({
  departingStaff: null,
  inheritingStaff: null,
});

const staffList = ref([
  { id: 1, name: '客服A' },
  { id: 2, name: '客服B' },
  { id: 3, name: '客服C' },
  { id: 4, name: '客服D' },
]);

const availableStaffList = computed(() => {
  return staffList.value.filter(staff => staff.id !== form.value.departingStaff);
});

const handleHandover = () => {
  const departing = staffList.value.find(s => s.id === form.value.departingStaff)?.name;
  const inheriting = staffList.value.find(s => s.id === form.value.inheritingStaff)?.name;

  ElMessageBox.confirm(
    `确定要将【${departing}】的所有工作内容交接给【${inheriting}】吗？此操作不可逆。`,
    '确认交接',
    {
      type: 'warning',
    }
  ).then(() => {
    // 模拟交接过程
    ElNotification({
      title: '交接成功',
      message: `已将【${departing}】的所有工单、会话等工作内容全权交接给【${inheriting}】。`,
      type: 'success',
    });
    // 实际业务中，这里会调用后端API执行交接
    // 交接后，可以将离职客服从列表中移除
    staffList.value = staffList.value.filter(staff => staff.id !== form.value.departingStaff);
    form.value.departingStaff = null;
    form.value.inheritingStaff = null;
  });
};
</script> 